<template>
  <el-affix :offset="0">
    <el-menu
        :default-active="defaultActive"
        class="el-menu-demo"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        :unique-opened="true"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
    >
      <!-- logo -->
      <el-image
          src="/src/assets/images/logo.png"
          style="margin: 5px 0 5px 20px;"
      />
      <el-menu-item index="/seekerMain/seekerHome">
        首页
      </el-menu-item>
      <el-menu-item index="/seekerMain/searchMain">
        搜索
      </el-menu-item>
      <div class="flex-grow" style="flex-grow: 1;"/>
      <el-sub-menu index="1">
        <template #title>简历</template>
        <el-menu-item @click="dialogVisible = true">简历上传</el-menu-item>
        <el-menu-item @click="updateResume">在线填写</el-menu-item>
      </el-sub-menu>
<!--      <el-menu-item-group></el-menu-item-group>-->
      <el-sub-menu index="2">
        <template #title>
          {{ username }}
          <el-avatar
              :src="headImage"
              alt="头像"
              style="width: 50px;height:50px;margin-left: 10px"
          /></template>
        <el-menu-item index="/seekerMain/selfMessageSeeker">
          <el-icon><UserFilled /></el-icon>
        个人中心
        </el-menu-item>
        <el-menu-item @click="toLeave">
          <el-image src="/src/assets/images/icons/leave.png" style="margin: 0 8px 15px 4px" />
          退出登录
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-affix>
  <el-dialog
      v-model="dialogVisible"
      width="500"
      :before-close="handleClose"
  >
    <el-upload
        class="upload-demo"
        drag
        action="http://localhost:60000/user/api/v1/upload"
        limit="1"
        :onSuccess="handleSuccess"
        :accept="'.pdf,.doc,.docx,.jpg,.png'"
        :auto-upload="false"
        ref="uploadRef"
    >
      <div class="el-upload__text">
        <el-text size="large">拖拽文件到这里</el-text>
      </div>
      <div style="margin-top: 20px">
        <el-text>简历建议使用 PDF 文件，也支持DOC、DOCX、JPG、PNG 格式</el-text>
      </div>
      <div style="margin-top: 10px">
        <el-text style="color: #f26d49;">文件大小不超过20M</el-text>
      </div>
      <el-button style="margin-top: 30px" type="primary">
        上传简历
      </el-button>
    </el-upload>
    <div style="display: flex; margin-top: 20px">
      <div style="flex-grow: 2"></div>
      <el-button type="info" @click="handleClose">
        取消
      </el-button>
      <div style="flex-grow: 1"></div>
      <el-button type="success" @click="queding">
        确定
      </el-button>
      <div style="flex-grow: 2"></div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted} from "vue";
import { useRoute, useRouter } from 'vue-router';
import {ElMessage,ElMessageBox} from 'element-plus'
import {UserFilled} from '@element-plus/icons-vue'
import {recruiterApi, seekerApi} from '../../../api/app';
import mitt from "../../../router/mitt";
const route = useRoute()
const router = useRouter()

const defaultActive = ref(); //默认导航
const dialogVisible = ref(false)
const uploadRef = ref(null)

mitt.on('index', (param) =>{
  defaultActive.value = param
  console.log("mitt中的内容：",mitt.all.get('index'))
  console.log("defaultActive",defaultActive.value)
  console.log("param",param)
})

const username = ref() //假造内容
const headImage = ref()


const handlerChange = (event) =>{
  if(event.type === 'changeUserNick'){
    username.value = event.detail
  } else if(event.type === 'changeImage'){
    headImage.value = event.detail
  }
}

onMounted(() => {
  defaultActive.value = route.path;
  username.value = JSON.parse(localStorage.getItem('seeker')).userNick
  headImage.value = JSON.parse(localStorage.getItem('seeker')).headImage
  if(username.value===''||username.value===null) username.value = "用户昵称"
  //监听界面更新
  const handler = (event) =>{
    handlerChange(event);
  }
  window.addEventListener('changeImage',handler)
  window.addEventListener('changeUserNick',handler)
  return () =>{
    window.removeEventListener('changeImage',handler)
    window.removeEventListener('changeUserNick',handler)
  }
  // console.log(defaultActive.value)
})
// 改变顶部导航
const handleSelect = (key) => {
  // console.log(defaultActive.value)
  defaultActive.value = key;
  // console.log(key)
}

const handleClose = () => {
  dialogVisible.value = false
  onMounted(null)
}
const handleSuccess = (response, file) => {
  console.log(response)
  ElMessageBox.alert('上传成功', '提示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: 'OK',
    callback: (action) => {
      dialogVisible.value = false;
      // 跳转到个人信息界面 ！！！！！！！！！！！！！！！！！！！！！
      router.push("/seekerMain/selfMessageSeeker")
    },
  })
}
const queding = () =>{
  // 保存
  console.log(uploadRef.value)
  if (uploadRef.value) {
    console.log(uploadRef.value)
    // console.log('0000')
    uploadRef.value.submit()
  } else {
    dialogVisible.value = false;
    ElMessage({
      type:'info',
      message: '简历上传失败'
    })
  }

}

const updateResume = () =>{
  router.push("/seekerMain/selfMessageSeeker")
}

// 退出系统
const toLeave = () => {
  ElMessageBox.confirm(
      '您确定要离开嘛？',
      '危险操作',
      { confirmButtonText:'确定',cancelButtonText:'取消',type:'warning', }
  ).then(() => {
    // 确认退出
    // 去掉全局变量并跳转到登陆页面
    localStorage.removeItem('seeker');
    router.replace({ name: 'Login' });
  })
}
</script>

<style scoped>

</style>
